<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
	//var baseUrl = '../EZOPSDashboardUI';
	$(document).ready(function() {
		 /**
         * To handle left menu toggle on page load
         */
    	$('#operation_li').addClass('root-level has-sub opened');
    	$('#operation_li_ul').toggle('click').addClass('visible');
    	$('#operation_li_ul').attr('style','');
        $('#operation_li_ul_li_' + 4).attr('style','font-weight: bold;');

						// Load upload profile pic form
						/*window.onload = function() {
							//YOUR ACTION  
							$("#loadUploadForms").load("UploadForm");
							console.log("Forms loaded");
						}*/

						$("a.disabled").click(function() {
							return false;
						});
						
						
						
						
						// prepare the data

						// var initGrid = function (assetId) {
						//console.log(assetId);
						var source = {
							dataType : "json",
							dataFields : [ {
								name : 'taskId',
								type : 'string'
							}, {
								name : 'ezopsId',
								type : 'string'
							}, {
								name : 'asset',
								type : 'string'
							}, {
								name : 'clientTradeID',
								type : 'string'
							}, {
								name : 'creationTime',
								type : 'string'
							}, {
								name : 'client',
								type : 'string'
							}, {
								name : 'fileName',
								type : 'string'
							} ],
							url : '/tradeprocessing/service/ezops/mytasks/'+'${userId}'

						};
						var dataAdapter = new $.jqx.dataAdapter(source, {
							/* autoBind: true, */
							loadComplete : function(records) {
								// console.log(records);
							}
						});

						// create jqxDataTable.
						$("#Mapped").jqxGrid({
							source : dataAdapter,
							width : '100%',
							groupable : true,
							sortable : true,
							pageable : true,
							autoheight : true,
							editable : true,
							columnsresize : true,
							//selectionmode: 'checkbox',

							columns : [ {
								text : 'Ticket#',
								cellsAlign : 'left',
								columngroup : 'ProductDetails',
								align : 'center',
								dataField : 'taskId',/* pinned: true,*/
								width : '10%',
								editable : false,
								pinned : true
							}, {
								text : 'EZOPS Id',
								cellsAlign : 'left',
								columngroup : 'ProductDetails',
								align : 'center',
								dataField : 'ezopsId',/* pinned: true,*/
								width : '10%',
								editable : false,
								pinned : true
							}, {
								text : 'Creation Date',
								cellsAlign : 'left',
								columngroup : 'ProductDetails',
								align : 'center',
								dataField : 'creationTime',
								width : '12%',
								editable : false,
								pinned : true
							}, {
								text : 'Affected Process',
								dataField : 'clientTradeID',
								columngroup : 'ProductDetails',
								align : 'center',
								cellsAlign : 'left',
								width : '12%',
								editable : false,
								pinned : true
							}, {
								text : 'Affected Item',
								columngroup : 'ProductDetails',
								dataField : 'asset',
								cellsformat : 'd',
								cellsAlign : 'left',
								align : 'center',
								width : '15%',
								editable : false,
								pinned : true
							}, {
								text : 'Client',
								cellsAlign : 'center',
								align : 'center',
								dataField : 'client',
								width : '15%',
								editable : false,
								pinned : true
							}, {
								text : 'Brief Description',
								cellsAlign : 'center',
								align : 'center',
								dataField : 'fileName',
								width : '15%',
								editable : false,
								pinned : true
							},
							{
								text : 'Action',
								cellsAlign : 'center',
								align : 'center',
								width : '11%',
								columntype : 'button',
								editable : false,
								pinned : true,cellsrenderer: function () {
						            return "Start";
						        }, buttonclick: function (row) {
						        	var rowData = $("#Mapped").jqxGrid('getrowdata', row);
						        	var taskId = rowData.taskId;
						        	console.log(ezopsContextPath+'/tradetask/gettaskdetails/'+taskId);
						        	window.location = ezopsContextPath+'/tradetask/gettaskdetails/'+taskId;
						            console.log(ko.toJSON(rowData));
						        }
							}]
						});
						/**
						 * Populate Ezops Client Field
						 */

						$
								.ajax({
									type : "GET",
									'url' : ezopsContextPath
											+ '/lookup/getallezopsclients',
									'datatype' : "array",
									'success' : function(data) {
										for ( var i = 0, len = data.length; i < len; i++) {
											$('#ezopsclient-class')
													.append(
															'<option value="' + data[i].clientId + '">'
																	+ data[i].clientName
																	+ '</option>');
										}
									}
								});
					});
</script>

<div class="panel panel-default">
	<div class="panel-heading">
		<div class="panel-title">
			<strong> EZOPS </strong>
		</div>
	</div>
	<!-- /.panel-heading -->
	<div class="panel-body">
		<div class="row">
			<div class="col-md-12">
				<div id="Mapped" style="clear: both; margin: 20px 0;"></div>
			</div>
		</div>
	</div>
</div>